<template>
  <div id="tool-wrapper">
    <div class="tool-item" v-for="item in tools" :key="item.title">
      <a-popover
        v-if="item.title === '图层控制'"
        placement="leftTop"
        trigger="click"
      >
        <template #content>
          <div v-for="line in lineData" :key="line.id">
            <a-checkbox @change="toggleLineVisibility(line)">{{
              line.name
            }}</a-checkbox>
          </div>
        </template>
        <i :class="['iconfont', item.icon]"></i>
      </a-popover>
      <i
        v-else
        :class="['iconfont', item.icon]"
        @click="handleToolClick(item)"
      ></i>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useLineStore } from '@/store/lineStore'
const store = useLineStore()
const tools = ref([
  { title: '图层控制', icon: 'icon-layer' },
  { title: '全屏', icon: 'icon-fullscreen' },
])
const lineData = store.lineData
let viewer = null
watch(
  () => store.viewer,
  (newViewer) => {
    if (newViewer) viewer = newViewer
  },
  { immediate: true }
)
const toggleLineVisibility = (line) => {
  // 这里可结合 effectController 控制显隐
  // 例如：viewer.scene.primitives.getById(line.id)?.show = !line.visible
}
const handleToolClick = (item) => {
  if (item.title === '全屏') {
    if (viewer && viewer.container.requestFullscreen) {
      viewer.container.requestFullscreen()
    }
  }
}
</script>

<style scoped>
#tool-wrapper {
  position: absolute;
  left: 20px;
  top: 100px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tool-item {
  background: #222c3c;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>
